<template>
    <view>
        <u-popup :show="ruleShow" mode="center" bgColor="transparent">
            <view class="big_box"
                style="background-image: url('https://morgan.dingxians.cn/upload/20241016/670f5a8aca594.png');">
                <view class="guanbi_box" @click="hidePopup"
                    style="background-image: url('https://morgan.dingxians.cn/static/recordDrwa/3.png');"></view>
                <view class="zhongjianbtu"
                    style="background-image: url('https://morgan.dingxians.cn/upload/20241016/670f5a8ac4fb9.png');">
                </view>
                <view class="con_box" v-if="is_bonus">
                    <div class="dange_box" v-for="item,n in bxDetailObj.prize_list" :key="n">
                        <view class="top_box">
                            <image :src="item.image" mode="scaleToFill" />
                            <view class="gv_box" v-if="bxDetailObj.level_id == 7">概率：{{ Number(item.probability) }}%</view>
                            <view class="gv_box" v-if="bxDetailObj.level_id == 8">{{ item.num }}/{{ item.original_num }}</view>
                        </view>
                        <view class="name_box">{{ item.title }}</view>
                    </div>
                    <view v-for="i in 3" style="width: 140rpx;"></view>
                </view>
                <view class="con_box" v-else>
                    <div class="dange_box" v-for="item,n in bxDetailObj.prizes" :key="n">
                        <view class="top_box">
                            <image :src="item.goods_image" mode="scaleToFill" />
                            <view class="gv_box" v-if="bxDetailObj.level_id == 7">概率：{{ Number(item.probability) }}%</view>
                            <view class="gv_box" v-if="bxDetailObj.level_id == 8">{{ item.num }}/{{ item.original_num }}</view>
                        </view>
                        <view class="name_box">{{ item.goods_name }}</view>
                    </div>
                    <view v-for="i in 3" style="width: 140rpx;"></view>
                </view>
            </view>
        </u-popup>

    </view>
</template>
<script>
export default {
    props: {
        ruleShow: {
            type: Boolean,
            default: false,
        },
        bxDetailObj: {
            type: Object,
            default: {},
        },
        is_bonus:{
            type:Boolean,
            default:true,
        }
    },
    methods: {
        hidePopup() {
            this.$emit('handlePopup')
        }
    }
}
</script>
<style lang="scss" scoped>
.big_box {
    width: 680rpx;
    height: 600rpx;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding-top: 29rpx;
    position: relative;
    box-sizing: border-box;
    padding-top: 154rpx;

    .guanbi_box {
        width: 73rpx;
        height: 73rpx;
        background-size: 100% 100%;
        position: absolute;
        top: 61rpx;
        right: 32rpx;
    }

    .zhongjianbtu {
        width: 371rpx;
        height: 57rpx;
        background-size: 100% 100%;
        position: absolute;
        top: 61rpx;
        right: 0;
        left: 0;
        margin: auto;

    }

    .con_box {
        width: 100%;
        height: 373rpx;
        box-sizing: border-box;
        padding: 0 28rpx;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        overflow: hidden;
        overflow-y: auto;

        .dange_box {
            width: 140rpx;
            height: 185rpx;
            margin-bottom: 23rpx;

            .top_box {
                width: 140rpx;
                height: 140rpx;
                background: #FFFFFF;
                border-radius: 10rpx;
                border: 1px solid #FFFFFF;
                margin-bottom: 12rpx;
                position: relative;

                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 10rpx;
                }

                .gv_box {
                    width: 140rpx;
                    height: 30rpx;
                    background: rgba(0, 0, 0, .5);
                    border-radius: 0rpx 0rpx 10rpx 10rpx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    font-size: 20rpx;
                    text-align: center;
                    color: #FFFFFF;
                    line-height: 30rpx;
                    position: absolute;
                    bottom: 0;
                }
            }

            .name_box {
                width: 100%;
                // height: 23rpx;
                font-family: PingFang SC;
                font-size: 24rpx;
                color: #FFFFFF;
                // line-height: 18rpx;
                overflow: hidden;
                text-align: center;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }
}
</style>